<template>
  <div style="background: #fff; height: 100%;overflow: hidden;">
    <div style="padding: 12px 28px;">
      <div class="logo">
        <img :src="logoImg"></img>
      </div>
      <div class="login">
        <div class="field">
          <i ref="icon0" class="fa fa-phone"></i>
          <ui-textbox v-model="phone" @focus="handleInputFocus(0)" @blur="handleInputBlur(0)" type="tel" floating-label label="手机号" placeholder="请输入正确的手机号" :maxlength="11" :invalid="phone.length > 11">
          </ui-textbox>
        </div>
        <div class="field validate-field">
            <i ref="icon1" class="fa fa-key"></i>
            <ui-textbox v-model="validateCode" @focus="handleInputFocus(1)" @blur="handleInputBlur(1)" type="number" floating-label label="验证码"></ui-textbox>
            <el-button ref="validate" type="primary" @click="getValidate" round plain :disabled="validateDisabled">{{ validateName }}</el-button>
        </div>
        <div class="button-list">
          <el-button @click="goBack">取消</el-button>
          <el-button type="primary" @click="login">立即登陆</el-button>
        </div>
      </div>

      <div class="other">
        <div class="item" @click="wechatLogin">
          <img :src="wechatImg"/>
          <p>微信登录</p>
        </div>
        <div class="item" @click="QQLogin">
          <img :src="qqImg"/>
          <p>QQ登录</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/api/axiosApi'

import qqImg from '@/assets/images/qq.png'
import logoImg from '@/assets/images/logo.png'
import wechatImg from '@/assets/images/wechat.png'

import { Toast } from 'mint-ui'
import wechatApi from '@/api/wechatApi'

let countDown = 60
let toastInstance = null

export default {
  data () {
    return {
      qqImg,
      wechatImg,
      logoImg,
      phone: '',
      validateCode: '',
      validateName: '验证码',
      validateDisabled: false,
      bizId: ''
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    getValidate () {
      if (!(/^1[34578]\d{9}$/.test(this.phone))) {
        Toast('请输入正确的手机号码')
        return
      }
      if (countDown === 60) {
        const _self = this
        axios.post('/user/sendValidaByTel', {
          phone: this.phone
        }, (data) => {
          _self.bizId = data
          Toast('发送验证码成功')
        })
      }
      this.setTimeDown()
    },
    setTimeDown () {
      if (countDown === 0) {
        this.validateDisabled = false
        this.validateName = '重新获取'
        countDown = 60
        return
      } else {
        this.validateDisabled = true
        this.validateName = '重新发送(' + countDown + ')'
        countDown--
      }
      const _self = this
      setTimeout(() => {
        _self.setTimeDown()
      }, 1000)
    },
    login () {
      if (toastInstance !== null) {
        toastInstance.close()
      }
      if (!(/^1[34578]\d{9}$/.test(this.phone))) {
        toastInstance = Toast('请输入正确的手机号码')
        return
      }
      if (this.validateCode.length !== 6) {
        toastInstance = Toast('请输入正确的验证码')
        return
      }
      if (this.bizId === '') {
        toastInstance = Toast('登录失败')
        return
      }
      const _self = this
      const salesCode = this.$route.query.salesCode ? this.$route.query.salesCode : ''
      axios.post('/user/loginByTel', {
        phone: this.phone,
        telValida: this.validateCode,
        sourceCode: salesCode
      }, (data) => {
        if (typeof data.nickname === 'undefined' || data.nickname === null) {
          data.nickname = '请输入姓名'
        }
        if (typeof data.intro === 'undefined' || data.intro === null) {
          data.intro = '暂无简介'
        }
        for (let index in data) {
          if (typeof data[index] === 'undefined' || data[index] === null) {
            if (index === 'nickname') {
              data[index] = '请输入昵称'
            } else if (index === 'intro') {
              data[index] = '暂无简介'
            } else if (index === 'schoolName') {
              data[index] = '请输入学校全称'
            } else if (index === 'academyName' || index === 'birthday' || index === 'major' || index === 'realname' || index === 'phone' || index === 'qq' || index === 'grade') {
              data[index] = '请输入'
            }
          }
        }
        localStorage.setItem('openId', data.openId)
        if (data.salesCode && data.salesCode !== null) {
          this.$route.query.salesCode = data.salesCode
        }
        _self.$store.commit('changePersonInfo', data)
        let toPath = '/wechat/person'
        if (localStorage.getItem('backPath') !== null) {
          toPath = localStorage.getItem('backPath')
          localStorage.removeItem('backPath')
        }
        Toast('登录成功')
        _self.$router.push({
          path: toPath,
          query: _self.$route.query
        })
      })
    },
    wechatLogin () {
      if (toastInstance !== null) {
        toastInstance.close()
      }
      let ua = window.navigator.userAgent.toLowerCase()
      if (ua.match(/micromessenger/i) == 'micromessenger') {
        // 如果是微信浏览器，直接微信登录
        wechatApi.wechatLogin()
      } else {
        toastInstance = Toast({
          message: '请关注“QD校园”微信公众号',
          position: 'center',
          duration: 3000
        })
      }
    },
    QQLogin () {
      if (toastInstance !== null) {
        toastInstance.close()
      }
      window.location.href = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101443385&redirect_uri=http://www.qdcollege.cn/&state=QQ'
    },
    handleInputFocus (index) {
      this.$refs['icon' + index].style.color = '#2196f3'
    },
    handleInputBlur (index) {
      this.$refs['icon' + index].style.color = 'rgba(0, 0, 0, 0.54)'
    }
  },
  name: 'login'
}
</script>

<style>
.ui-textbox input, .ui-textbox .is-inline, .ui-textbox .is-floating {
  padding-left: 28px;
}
</style>

<style lang="stylus">
@import '~assets/stylus/variable.styl';

.logo {
  text-align: center;
  margin-top: 24px;
  img {
    width: 45%;
  }
}

.login {
  margin-top: 12px;
  .field {
    position: relative;
    margin-top: -14px;
    overflow: hidden;
    width: 100%;
    i {
      position: absolute;
      left: 6px;
      bottom: 23px;
      font-size: 21px;
      color: rgba(0, 0, 0, 0.54);
    }

    input {
      overflow: hidden;
    }
    .el-button {
      position: absolute;
      top: 15px;
      right: 0;
      padding: 9px 26px;
    }
  }

  .validate-field {
    input {
      padding-right: 100px;
    }
  }

  .button-list {
    display: flex;
    justify-content: space-around;
    margin-top: 21px;
    .el-button {
      width: 45%;
      font-size: 18px;
    }
  }
}

.other {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
  .item {
    img {
      width: 60px;
    }
    p {
      text-align: center;
      font-size: 14px;
      margin-top: 3px;
    }
  }
}
</style>
